<template>
  <div class="app-container">
    <el-row style="margin-bottom:20px">
      <span>{{ hotel_name }}</span>
    </el-row>
    <el-row style="margin-bottom:20px">
      <span>{{ hotel_address }}</span>
    </el-row>
    <el-tabs v-model="activeName">
      <el-tab-pane label="Work Order" name="first" />
      <el-tab-pane label="Contact List" name="second" />
      <el-tab-pane label="Job List" name="third" />
    </el-tabs>
    <work-order v-show="activeName==='first'" ref="workOrderComp" />
    <contact-list v-show="activeName==='second'" ref="contactListComp" />
    <job-list v-show="activeName==='third'" ref="jobListComp" />
  </div>
</template>

<script>
import { baseAPI } from '@/utils/request'
import workOrder from './workOrder'
import contactList from './contactList'
import jobList from './jobList'

export default {
  components: {
    'work-order': workOrder,
    'contact-list': contactList,
    'job-list': jobList
  },
  data() {
    return {
      hotel_id: 0,
      hotel_name: '',
      hotel_address: '',
      activeName: 'first',
      routes: [],
      rolesList: [],
      dialogVisible: false,
      dialogType: 'new',
      checkStrictly: false,
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      search: {
        keyword: '',
        page: 1
      },
      total: 10,
      pagesize: 1
    }
  },
  computed: {
    routesData() {
      return this.routes
    }
  },
  watch: {
    hotel_id(newValue, oldValue) {
      if (newValue) {
        this.getCreate(true)
      }
    }
  },
  created() {
    if (this.$route.query && this.$route.query.id) {
      // 业务逻辑
      this.hotel_id = this.$route.query.id
      this.hotel_name = this.$route.query.name
      this.hotel_address = this.$route.query.address
    }
    // Mock: get all routes and roles list from server
    this.getRoutes()
  },
  methods: {
    getCreate(val) {
      if (val) {
        this.$refs.workOrderComp.search.hotel_id = this.hotel_id
        this.$refs.contactListComp.search.hotel_id = this.hotel_id
        // this.$refs.jobListComp.search.hotel_id = this.hotel_id
        this.$refs.jobListComp.getJobList(this.hotel_id)
      }
    },
    async getRoutes() {
      const res = await baseAPI.get('user/role/routes')
      this.serviceRoutes = res
      this.routes = res
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  .roles-table {
    margin-top: 30px;
  }
  .permission-tree {
    margin-bottom: 30px;
  }
}
</style>
